<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}} <br />
    <button @click="changeMessage(), test()">点我一下</button>
    <form action="" method="post" @submit.prevent>
        <input type="text" />
        <button @click="send">提交</button>
    </form>

    <!--self 触发事件的只能是元素本身子类不包含在内-->
    <!--<div @click.self="click('div1')" style="width: 200px;height: 200px;background-color: beige">-->
    <!--    &lt;!&ndash;stop 阻止事件冒泡&ndash;&gt;-->
    <!--    <div @click="click('div2')" style="width: 100px;height: 100px;background-color: bisque"> hhh</div>-->
    <!--</div>-->
    <!--<div @click="click('div1')" style="width: 200px;height: 200px;background-color: beige">-->
    <!--    <div @click="click('div2')" style="width: 100px;height: 100px;background-color: bisque"> hhh</div>-->
    <!--    &lt;!&ndash;修饰符可以串联 @click.prevent.stop 阻止默认事件并停止冒泡&ndash;&gt;-->
    <!--    <a href="https://www.kaifamiao.com" @click.prevent.stop="click('a')">点击一下</a>-->
    <!--</div>-->
    <!--keyup 键盘事件 keyup.enter/delete/esc/shift 回车键盘事件-->
    <input type="text" name="username" v-model.lazy="user.username" @keyup.delete="sendName()" @blur="verifyUsername"/><br />
    <input type="password" name="password" v-model.lazy="user.password" /><br />
    <!--number 会将字符串转换成number类型-->
    <input type="number" name="num" v-model.lazy.number="user.num" /><br />
    <input type="text" name="info" v-model.lazy.trim="user.info" /><br />

    <!--once 事件只会触发一次-->
    <button @click.once="click('button')">点击</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>